<!doctype html>
<html>
<head>
  <title>Test Playing Card Element</title>
  <script src="polymer-all/polymer/polymer.js"></script>  
  <link rel="stylesheet" href="polymer-all/polymer-ui-elements/basic.css">
  <link rel="import" href="card-element.html">
  <link rel="import" href="card-tester-element.html">
  <style>
    html, body {
    margin: 0;
    width:100%;
    height:100%
    margin:0;
  }

  #testarea {
    background-color:green;
    width:100%;
    height:100%;
    padding:30px;
  }

  html, body {
    width:100%;
    height:100%;
  }
  input {
    width: 100%;
  }
  </style>
</head>
<body>
<polymer-element name="single-card-tester" attributes="value suit faceup flippable card valueInput cardheight cardwidth originx originy">
  <template>
      <div id="cardholder">
    <card-card id="card" value="{{value}}" suit="{{suit}}" pseudo="x-card" originx="{{originx}}" originy="{{originy}}" style="         height:{{cardheight}}px;width:{{cardwidth}}px;font-size:{{fontsize}}px;-webkit-transform:rotate({{angle}}deg);transform:rotate({{angle}}deg);-webkit-transform-origin-x:{{originx}}%;transform-origin-x:{{originx}}%;-webkit-transform-origin-y:{{originy}}%;transform-origin-y:{{originy}}%;"></card-card>
    </div>
    <div>
    <select id="suitInput" value="{{suit}}">
      <option value="diamonds">Diamonds</option>
      <option value="hearts">Hearts</option>
      <option value="spades">Spades</option>
      <option value="clubs">Clubs</option>
    </select>
    </div>
    <div>
    <select id="valueInput" value="{{value"}}>
      <option value="0">Joker</option>
      <option value="1">Ace</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="7">7</option>
      <option value="8">8</option>
      <option value="9">9</option>
      <option value="10">10</option>
      <option value="11">Jack</option>
      <option value="12">Queen</option>
      <option value="13">King</option>
    </select>
    </div>
    <h2>CSS</h2>
    <pre>card-card {
  height:{{cardheight}}px;
  width:{{cardwidth}}px;
  font-size:{{fontsize}}px;
}</pre>
    <h2>HTML</h2>
    <pre>&lt;card-card value="{{value}}" suit="{{suit}}"&gt;&lt;/card-card&gt;</pre>
    <card-tester id="tester" cardheight="{{cardheight}}" cardwidth="{{cardwidth}}" angle="{{angle}}" originx="{{originx}}" originy="{{originy}}">
    </card-tester>
    <ul>
    <li>
    <input id="faceup" type="checkbox" value="true" checked="checked">Faceup</input>
    <input id="flippable" type="checkbox" value="true" checked="checked">Flippable</input>
    </li>
    </ul>
  </template>
  <script>
    Polymer('single-card-tester', {
        value: 12,
        suit: 'clubs',
        cardheight:200,
        cardwidth:144,
        fontsize:20,
        lockedRatio:true,
        angle:0,
        originx:50,
        originy:50,
        created: function() {
            // export tester internals for interactive testing
            this.card = new Card();
            this.$.tester.card = this.card;
            this.valueInput = this.$.valueInput;
            this.suitInput = this.$.suitInput;
            this.$.valueInput.value = this.value;
            this.$.suitInput.value = this.suit;
            this.ratio = this.cardwidth / this.cardheight;

            // why do I have to do this? This bug: https://github.com/Polymer/mdv/issues/97
            this.$.valueInput.onchange = function(e) {
                this.value = e.currentTarget.value;
            }.bind(this);
            this.$.suitInput.onchange = function(e) {
                this.suit = e.currentTarget.value;
            }.bind(this);
            this.$.faceup.onchange = function(e) {
                this.$.card.faceup = e.currentTarget.checked;
            }.bind(this);
        }
    });
  </script>
</polymer-element>
<div id="testarea">
  <single-card-tester id="tester"></single-card-tester>
</div>
<script>
window.addEventListener('WebComponentsReady', function () {
var tester = document.getElementById('tester');
});
</script>
</body>
</html>
